<!--
 * @Author       : Sayolit
 * @Date         : 2023-01-08 12:15:44
 * @LastEditors  : Sayolit
 * @LastEditTime : 2023-01-10 12:10:47
 * @FilePath     : storeDemo.vue
 * @Description  : 
 * Copyright 2023 Sayolit, All Rights Reserved. 
 * 2023-01-08 12:15:44
-->
<script setup>
	const store = useStore()
	const { proxy } = getCurrentInstance()
	//通过计算属性获得state中的数据  vue2.x使用this.$store.state.username
	const info = computed(() => {
		return (
			proxy.$storage.getItem('username') || store.state.exampleStore.username
		)
	})

	const handleClick = () => {
		//store.state.exampleStore.username ='试测过通'
		//1.通过dispatch方式发送action的请求
		//store.dispatch('changeUserNameAction','batMan')

		//获得年龄
		console.log(store.getters['exampleStore/age'])
		store.commit('exampleStore/changeUsername', '试测过通')
		proxy.$storage.setItem('username', store.state.exampleStore.username)

		// console.log(proxy.$storage);
		// proxy.$storage.clearAll()
		console.log(proxy.$storage.getItem('username'))

		// const files = import.meta.globEager("./*.vue");
		// console.log(files);
	}

	const loginState = () => {
		ElMessage.success('用户名：' + info.value)
		// console.log(proxy.$storage)
		// proxy.$storage.setItem('age', 19)
		// proxy.$storage.clearItem('age')
		// ElMessage({
		// 	showClose: true,
		// 	message: ' ',
		// })
	}

	watchEffect(() => {
		loginState()
	})
</script>

<template>
	<div class="storage-div">
		<h1>Vuex案例</h1>
		<h3>{{ info }}</h3>
		<button @click="handleClick">点击改变名字</button>
	</div>
</template>

<style scoped lang="less">
	.storage-div {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 300px;
		flex-direction: column;
		text-align: center;
		margin-top: 120px;
		> h1,
		h3,
		button {
			margin-top: 10px;
		}
	}
</style>
